<!DOCTYPE html>
<html>
<head>
	<title>上传文件</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<style>
	    
	
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 20px;
		}

		.container {
			max-width: 400px;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 5px;
			padding: 20px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}

		h1 {
			text-align: center;
			color: #333;
		}

		form {
			text-align: center;
			margin-top: 20px;
		}

		.file-input {
			margin-bottom: 10px;
		}

		.submit-btn {
			background-color: #66CDAA	;
			color: white;
			border: none;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
		}

		.file-preview {
			margin-top: 20px;
			text-align: center;
			display: none;
		}

		.file-preview img,
		.file-preview video {
			max-width: 100%;
			max-height: 200px;
			margin-top: 10px;
			border-radius: 5px;
		}

		.info-text {
			text-align: center;
			margin-top: 20px;
			font-size: 12px;
			color: #999;
		}

		/* 新的UI样式 */
		.file-input-label {
			display: block;
			text-align: center;
			margin-bottom: 10px;
			font-size: 16px;
			color: #333;
		}
		
		
		
		

		.file-input-label input[type="file"] {
			display: none;
		}

		.file-input-label .custom-file-input {
			background-color: #7B68EE;
			color: white;
			border: none;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
		}

		.file-preview-container {
			margin-top: 20px;
			text-align: center;
			display: none;
		}

		.file-preview-container img,
		.file-preview-container video {
			max-width: 100%;
			max-height: 200px;
			margin-top: 10px;
			border-radius: 5px;
		}

		.info-text {
			text-align: center;
			margin-top: 20px;
			font-size: 12px;
			color: #999;
		}
		



	</style>
</head>
<body>
	<div class="container">
		<h1>上传文件</h1>
		<form action="upload.php" method="post" enctype="multipart/form-data">
			<label for="file" class="file-input-label">
				<span class="custom-file-input"><i class="fas fa-folder"></i> 选择文件</span> &nbsp;&nbsp;
				<input type="file" name="file" id="file" class="file-input">
				<button type="submit" name="submit" class="submit-btn"><i class="fas fa-upload"></i> 上传文件</button>
		</form>	</label>
		<div class="file-preview-container" id="preview-container">
			<div id="preview-content"></div>
		</div>
		<div class="info-text">
			&copy; 2023 JYKU.CN 提供图像和视频支持
		</div>
	</div>

	<script>
		// 预览上传的文件
		const fileInput = document.getElementById('file');
		const previewContainer = document.getElementById('preview-container');
		const previewContent = document.getElementById('preview-content');

		const MAX_FILE_SIZE = 30; // 允许的最大文件大小，单位为MB

		fileInput.addEventListener('change', (e) => {
			const file = e.target.files[0];
			const fileSizeMB = file.size / (1024 * 1024); // 文件大小，单位为MB

			if (fileSizeMB > MAX_FILE_SIZE) {
				alert('文件过大！请上传小于' + MAX_FILE_SIZE + 'MB的文件。');
				fileInput.value = ''; // 清空文件输入框的值
				previewContainer.style.display = 'none'; // 隐藏文件预览
				return;
			}

			// 其他代码...
		});

		fileInput.addEventListener('change', (e) => {
			const file = e.target.files[0];
			const reader = new FileReader();

			reader.onload = (event) => {
				const fileType = file.type;

				if (fileType.startsWith('image/')) {
					const img = document.createElement('img');
					img.src = event.target.result;
					img.style.maxWidth = '100%';
					img.style.maxHeight = '200px';
					img.style.borderRadius = '5px';
					previewContent.innerHTML = '';
					previewContent.appendChild(img);
				} else if (fileType.startsWith('video/')) {
					const video = document.createElement('video');
					video.src = event.target.result;
					video.controls = true;
					video.style.maxWidth = '100%';
					video.style.maxHeight = '200px';
					video.style.borderRadius = '5px';
					previewContent.innerHTML = '';
					previewContent.appendChild(video);
				}

				// 获取文件大小并显示
				const fileSize = (file.size / (1024 * 1024)).toFixed(2); // 将文件大小转换为MB并保留两位小数
				const fileSizeText = document.createElement('div');
				fileSizeText.textContent = `文件大小: ${fileSize}MB`;
				fileSizeText.style.fontSize = '12px'; // 设置字体大小为12px

				// 获取文件名称并显示
				const fileNameText = document.createElement('div');
				fileNameText.textContent = `文件名称: ${file.name}`;
				fileNameText.style.fontSize = '12px'; // 设置字体大小为12px

				// 创建一个容器来包含文件名称和文件大小
				const fileInfoContainer = document.createElement('div');
				fileInfoContainer.style.display = 'flex'; // 使用 flex 布局
				fileInfoContainer.style.alignItems = 'center'; // 垂直居中对齐
				fileInfoContainer.style.justifyContent = 'center'; // 水平居中对齐
				
				// 在文件名称和文件大小之间插入两个空格
				const space = document.createTextNode('\u00A0\u00A0'); // 使用 Unicode 空格字符

				// 将文件名称、空格和文件大小依次添加到容器中
				fileInfoContainer.appendChild(fileNameText);
				fileInfoContainer.appendChild(space);
				fileInfoContainer.appendChild(fileSizeText);

				// 将容器添加到预览内容中
				previewContent.appendChild(fileInfoContainer);
				previewContainer.style.display = 'block';

			};

			if (file) {
				reader.readAsDataURL(file);
			} else {
				previewContainer.style.display = 'none';
			}
		});
	</script>
</body>
</html>

<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"KFunBsxDl2bThYnS",ck:"KFunBsxDl2bThYnS"})</script>
